<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile"
	contentType="text/html"
    renderKitId="PRIMEFACES_MOBILE">

    <pm:page title="Lodge a claim">

        <f:facet name="postinit">
            <h:outputStylesheet library="primefaces-mobile" name="calendar/calendar.css"  />
            <h:outputScript library="primefaces" name="gmap/gmap.js" />
            <h:outputScript library="primefaces-mobile" name="calendar/calendar.js" />            
			<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
            <script type="text/javascript">
            
                function findMe() {
                    navigator.geolocation.getCurrentPosition(
                        function(position) {
                            var map = PF('gmap').getMap(),
                            latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                            map.setCenter(latlng);

                            var marker = new google.maps.Marker({
                                position: latlng
                            });

                            
                            document.getElementById('newClaimForm:j_id_e:locLat').value = latlng.lat();
                            document.getElementById('newClaimForm:j_id_e:loclang').value = latlng.lng();
                            
                            marker.setDraggable(true);

                            marker.setMap(map);
                        },
                        function(error) {
                            alert(error.message);
                        },
                        {
                           enableHighAccuracy: true
                        });
                }
                
                function handlePointClick(event) {  
                    if(currentMarker === null) {  
                        document.getElementById('lat').value = event.latLng.lat();  
                        document.getElementById('lng').value = event.latLng.lng();  
              
                        var currentMarker = new google.maps.Marker({  
                            position:new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
                        });  
                        currentMarker.setDraggable(true);
              
                        var map = PF('gmap').getMap();
                        map.addOverlay(currentMarker);

                        document.getElementById('newClaimForm:j_id_e:locLat').value = event.latLng.lat();
                        document.getElementById('newClaimForm:j_id_e:loclang').value = event.latLng.lng();
                    }
                }

                findMe();

            </script>
<!-- 
            <script type="text/javascript">
                (function($) {
                    $.mobiscroll.i18n['pt_BR'] = $.extend($.mobiscroll.i18n['pt_BR'], {
                        dateFormat: 'dd/mm/yy',
                        dateOrder: 'ddMMyy',
                        dayNames: ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado'],
                        dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
                        dayText: 'Dia',
                        hourText: 'Hora',
                        minuteText: 'Minutos',
                        monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
                        monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
                        monthText: 'Mês',
                        secText: 'Segundo',
                        timeFormat: 'HH:ii',
                        timeWheels: 'HHii',
                        yearText: 'Ano',
                        setText: 'Selecionar',
                        cancelText: 'Cancelar',
                        nowText: 'Agora'
                    });
                })(jQuery);
            </script>
      -->       
		</f:facet>

        <!-- Main View -->
        <pm:view id="main" swatch="d">
        
            <h:form id="newClaimForm" enctype="multipart/form-data">
	            <pm:header title="Lodge a claim" swatch="b" >
                    <f:facet name="left"><p:button value="Cancel" iconPos="none" onclick="PrimeFaces.back()"/></f:facet>
                    <f:facet name="right"><p:commandButton value="Submit" action="#{claimView.lodgeClaim}" iconPos="none" /></f:facet>
	            </pm:header>
	
	            <pm:content>
                    <p:growl showDetail="true"/>  
					<p:accordionPanel>
					<p:tab title="Details" >
                

					<p:inputText value="#{claimView.claim.policyNumber}" label="Policy Number:" readonly="true"  />

					<pm:field >
	                    <h:outputLabel value="Vehicle:" for="vehicle" />
	                    <h:selectOneMenu id="vehicle" value="#{claimView.vehicle}" required="true">
							<f:selectItems value="#{claimView.vehicles}" var="vehicle" itemLabel="#{vehicle.registrationNumber} - #{vehicle.name}" itemValue="#{vehicle.policyNumber}" />
	                    </h:selectOneMenu>
		            </pm:field>
	            
					<p:inputTextarea rows="6" cols="33" value="#{claimView.claim.description}" label="What happened:" required="true" />

<!-- 
					<pm:field >
	                    <h:outputLabel value="When:" for="when" />
						<p:calendar id="when" value="#{claimView.claim.incidentTime}" pattern="MM/dd/yyyy HH:mm" />  
		            </pm:field>
	-->	            
		            <p:inputText value="#{claimView.claim.incidentTime}" label="Date / Time:"  type="datetime" required="true" size="20">
						<f:convertDateTime pattern="yyyy-MM-dd hh:mm" />
		            </p:inputText>

					<pm:field >
	                    <h:outputLabel value="Where you at fault:" for="atFault" />
						<pm:switch id="atFault" value="#{claimView.claim.insuredAtFault}" onLabel="Yes" offLabel="No"/>
		            </pm:field>

					<pm:field >
	                    <h:outputLabel value="Location:" for="locationMap" />
		                <p:gmap id="locationMap" center="-37.81, 144.96" zoom="17" type="ROADMAP" style="width:100%;height:15em" widgetVar="gmap"
		                	onPointClick="handlePointClick(event);"  >
		                </p:gmap>
		            </pm:field>
		            
		            <p:inputText id="locLat" value="#{claimView.claim.lossLocation.latitude}" type="hidden"/>
		            <p:inputText id="loclang" value="#{claimView.claim.lossLocation.longitude}" type="hidden"/>

					</p:tab>
					
					<p:tab title="Photos">

					<pm:field >
	                    <h:outputLabel value="Photos:" for="photos" />
	                    <p:fileUpload id="photos" value="#{claimView.file}" mode="simple"/> 
		            </pm:field>


					</p:tab>
					
					<p:tab title="Third Party">

					<p:inputText value="#{claimView.claim.thirdParty.name}" label="Name:" required="true" />

					<p:inputText value="#{claimView.claim.thirdParty.phoneNumber}" label="Phone Number:" type="tel" required="true" />
 
 					<p:inputText value="#{claimView.claim.thirdParty.emailAddress}" label="Email Address:" type="email" required="true" />

					<p:inputText value="#{claimView.claim.thirdParty.licenceNumber}" label="Licence:"  required="true" />

					</p:tab>
					</p:accordionPanel>

 	                <p:commandButton  value="Lodge my claim!" action="#{claimView.lodgeClaim}" iconPos="none" type="default" />

	            </pm:content>
            </h:form>
 
        </pm:view>

    </pm:page>

</f:view>